<template>
  <view class="warehouse-workspace">
    <!-- 物料管理 -->
    <view class="material-section bg-white margin-bottom">
      <view class="section-header padding">
        <view class="header-left flex align-center">
          <view class="section-icon material-icon">
            <text class="iconfont icon-material"></text>
          </view>
          <text class="text-lg text-bold margin-left-sm">物料管理</text>
        </view>
      </view>

      <view class="material-grid padding">
        <view class="action-item material-item" @click="navigateTo('/pages/wms/material/inventory')">
          <view class="action-icon">
            <image src="/static/images/inventory.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">库存查询</text>
        </view>
        <view class="action-item material-item" @click="navigateTo('/pages/wms/material/inbound')">
          <view class="action-icon">
            <image src="/static/images/inbound.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">入库单查询</text>
        </view>
        <view class="action-item material-item" @click="navigateTo('/pages/wms/material/outbound')">
          <view class="action-icon">
            <image src="/static/images/outbound.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">出库单查询</text>
        </view>
        <view class="action-item material-item" @click="navigateTo('/pages/wms/material/records')">
          <view class="action-icon">
            <image src="/static/images/record.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">操作记录</text>
        </view>
      </view>
    </view>

    <!-- 成品管理 -->
    <view class="product-section bg-white margin-bottom">
      <view class="section-header padding">
        <view class="header-left flex align-center">
          <view class="section-icon product-icon">
            <text class="iconfont icon-product"></text>
          </view>
          <text class="text-lg text-bold margin-left-sm">成品管理</text>
        </view>
      </view>

      <view class="product-grid padding">
        <view class="action-item product-item" @click="navigateTo('/pages/wms/product/inventory')">
          <view class="action-icon">
            <image src="/static/images/inventory.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">库存查询</text>
        </view>
        <view class="action-item product-item" @click="navigateTo('/pages/wms/product/inbound')">
          <view class="action-icon">
            <image src="/static/images/inbound.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">入库单查询</text>
        </view>
        <view class="action-item product-item" @click="navigateTo('/pages/wms/product/outbound')">
          <view class="action-icon">
            <image src="/static/images/outbound.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">出库单查询</text>
        </view>
        <view class="action-item product-item" @click="navigateTo('/pages/wms/product/records')">
          <view class="action-icon">
            <image src="/static/images/record.png" mode="aspectFit"></image>
          </view>
          <text class="action-label">操作记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "WarehouseWorkspace",
  data() {
    return {};
  },

  methods: {
    navigateTo(path) {
      uni.navigateTo({
        url: path,
        fail: () => {
          uni.showToast({
            title: "页面暂未开放",
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.warehouse-workspace {
  padding: 0 24rpx 24rpx;
  background: linear-gradient(180deg, #f8fafe 0%, #f5f7fa 100%);
  min-height: 100vh;
}

.material-section,
.product-section,
.quick-panel {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
}

.section-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
  }

  .header-left {
    .section-icon {
      width: 56rpx;
      height: 56rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.material-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }

      &.product-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }

      .iconfont {
        font-size: 28rpx;
        color: white;
      }
    }
  }

  text {
    color: white;

    &.text-blue {
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
  }
}

.stats-grid {
  gap: 20rpx;
}

.stat-card {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx 20rpx;
  display: flex;
  align-items: center;
  border: 1rpx solid #f0f2f5;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .stat-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;

    .iconfont {
      font-size: 28rpx;
      color: white;
    }
  }

  .stat-content {
    flex: 1;

    .stat-number {
      font-size: 32rpx;
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 4rpx;
    }

    .stat-label {
      color: #8c8c8c;
      font-size: 22rpx;
    }
  }

  // 门窗行业特色配色
  &.aluminum {
    .stat-icon {
      background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
    }
    .stat-number {
      color: #1890ff;
    }
  }

  &.glass {
    .stat-icon {
      background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
    }
    .stat-number {
      color: #13c2c2;
    }
  }

  &.hardware {
    .stat-icon {
      background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
    }
    .stat-number {
      color: #fa8c16;
    }
  }

  &.sliding-door {
    .stat-icon {
      background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
    }
    .stat-number {
      color: #722ed1;
    }
  }

  &.casement-window {
    .stat-icon {
      background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
    }
    .stat-number {
      color: #52c41a;
    }
  }

  &.curtain-wall {
    .stat-icon {
      background: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);
    }
    .stat-number {
      color: #eb2f96;
    }
  }
}

.recent-operations {
  background: #fafbfc;
  border-radius: 16rpx;
  margin-top: 24rpx;

  .operation-header {
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .text-bold {
      color: #262626;
      font-weight: 600;
    }
  }

  .operation-list {
    .operation-item {
      background: white;
      border-radius: 12rpx;
      margin-bottom: 12rpx;
      border: 1rpx solid #f0f0f0;
      transition: all 0.2s ease;

      &:last-child {
        margin-bottom: 0;
      }

      &:active {
        background: #f8f9fa;
        transform: scale(0.99);
      }

      .operation-type {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .iconfont {
          font-size: 24rpx;
          color: white;
        }

        &.inbound {
          background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
        }

        &.outbound {
          background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
        }

        &.check {
          background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
        }

        &.quality {
          background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
        }

        &.package {
          background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
        }

        &.ship {
          background: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);
        }
      }

      .operation-content {
        .operation-title {
          color: #262626;
          font-weight: 500;
          margin-bottom: 4rpx;
        }

        .operation-desc {
          color: #8c8c8c;
          line-height: 1.4;
        }
      }

      .operation-time {
        color: #bfbfbf;
        font-size: 20rpx;
      }
    }
  }
}

.quality-trace {
  background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
  border-radius: 16rpx;
  margin-top: 24rpx;
  border: 1rpx solid #d9f7be;

  .trace-header {
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid rgba(82, 196, 26, 0.2);

    .text-bold {
      color: #389e0d;
      font-weight: 600;
    }
  }

  .trace-stats {
    .trace-item {
      .trace-number {
        font-weight: bold;
        margin-bottom: 4rpx;
      }

      .trace-label {
        color: #8c8c8c;
      }
    }
  }
}

// 2x2 宫格布局
.material-grid,
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.action-item {
  background: white;
  border-radius: 24rpx;
  padding: 32rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2rpx solid transparent;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  min-height: 180rpx;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6rpx;
    transition: all 0.3s ease;
  }

  &:active {
    transform: scale(0.96);
    box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
  }

  .action-icon {
    width: 88rpx;
    height: 88rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);

    image {
      width: 56rpx;
      height: 56rpx;
    }
  }

  .action-label {
    color: #262626;
    font-weight: 600;
    font-size: 26rpx;
    text-align: center;
    line-height: 1.3;
  }

  // 物料管理样式
  &.material-item {
    &::before {
      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    }

    &:hover {
      border-color: rgba(79, 172, 254, 0.3);
      background: linear-gradient(135deg, #ffffff 0%, #f8fcff 100%);
    }

    .action-icon {
      background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
      border: 2rpx solid rgba(79, 172, 254, 0.1);
    }

    .action-label {
      color: #1890ff;
    }
  }

  // 成品管理样式
  &.product-item {
    &::before {
      background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
    }

    &:hover {
      border-color: rgba(67, 233, 123, 0.3);
      background: linear-gradient(135deg, #ffffff 0%, #f6ffed 100%);
    }

    .action-icon {
      background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
      border: 2rpx solid rgba(67, 233, 123, 0.1);
    }

    .action-label {
      color: #52c41a;
    }
  }
}

@media (max-width: 750rpx) {
  .stats-grid {
    &.col-3 {
      grid-template-columns: 1fr;
      gap: 16rpx;
    }
  }

  .stat-card {
    padding: 20rpx 16rpx;

    .stat-icon {
      width: 52rpx;
      height: 52rpx;
      margin-right: 16rpx;

      .iconfont {
        font-size: 24rpx;
      }
    }

    .stat-content {
      .stat-number {
        font-size: 28rpx;
      }

      .stat-label {
        font-size: 20rpx;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.material-section,
.product-section,
.quick-panel {
  animation: fadeInUp 0.6s ease-out;
}

.material-section {
  animation-delay: 0.1s;
}

.product-section {
  animation-delay: 0.2s;
}

.quick-panel {
  animation-delay: 0.3s;
}
</style>
